<template>
  <div class="title-comp w-h-full">
    <p class="w-h-full" :style="Object.assign({
      color: component.compConfigData.color,
      fontSize: component.compConfigData.fontSize + 'px',
      fontWeight: component.compConfigData.fontWeight,
      alignItems: alignItems,
      justifyContent: justifyContent,
      letterSpacing: component.compConfigData.letterSpacing + 'px',
      writingMode: component.compConfigData.writingMode
    }, $PnUtil.cssToVueStyleObj(component.compConfigData.customStyleCode))">
      {{component.compConfigData.text}}
    </p>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'TitleComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        text: '我是标题组件',

        color: '#fff',
        fontSize: 28,
        fontWeight: 'normal',
        textAlign: 'center',
        letterSpacing: 0,
        writingMode: 'horizontal-tb'

      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      alignItems () {
        if (this.component.compConfigData.writingMode == 'horizontal-tb') {
          return 'center'
        }else if (this.component.compConfigData.writingMode == 'vertical-rl') {
          if (this.component.compConfigData.textAlign == 'flex-start') {
            return 'flex-end'
          }else if (this.component.compConfigData.textAlign == 'flex-end') {
            return 'flex-start'
          }else {
            return 'center'
          }
        }
      },
      justifyContent () {
        if (this.component.compConfigData.writingMode == 'horizontal-tb') {
          return this.component.compConfigData.textAlign
        }else if (this.component.compConfigData.writingMode == 'vertical-rl') {
          return 'center'
        }
      }
    }
  };

  export default _this
</script>

<style lang="less" scoped>
  .title-comp {
    p {
      width: 100%;
      height: 100%;
      display: -webkit-flex;
      display: flex;
    }
  }
</style>
